<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.movebox{
				width: 500px;
				height: 600px;
				background-color: red;
				background-image:url(images/灰太狼.jpg) ;
				border:2px solid;
			
			/*声明调用movebox动画
			默认只执行一次-----infinite循环执行、不停息
			*/
			animation: movebox 1s infinite;
			
			/*改变默认方式，支持坐标系
			position位置，relative相对坐标
			*/
			position: relative;
			}
			/*定义一个动画（关键key帧frame）
			 name 动画名字
			 from 动画开始位置
			 to 动画结束位置
			过程css+html会自动产生中间过程
			
			动画一定要有设置它的坐标系
			*/
			@keyframes movebox{
				from{top: 0px;}
				to{top: 600px;}
			}
			
		</style>
	</head>
	<body>
		<h2>移动方块动画效果</h2>
		<h3>animation</h3>
		<div class="movebox"></div>
	</body>
</html>
